<template>
<!-- 商家功能列表 -->
	<view  class="work-container">
<!-- 宫格组件 -->
    <uni-section title="功能模块" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="3" :showBorder="false" @change="changeGrid">
        <uni-grid-item :index="0">
          <view class="grid-item-box">
            <uni-icons type="person-filled" size="30"></uni-icons>
            <text class="text">商家信息维护</text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="1">
          <view class="grid-item-box">
            <uni-icons type="staff-filled" size="30"></uni-icons>
            <text class="text">商品列表</text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="2">
          <view class="grid-item-box">
            <uni-icons type="color" size="30"></uni-icons>
            <text class="text">管理员功能模块</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
	</view>
</template>

<script>
export default {
    data() {
      return {
       
      }
    },
    methods: {
     
      changeGrid(e) {
		switch(e.detail.index) {
			case 0:
				this.$tab.reLaunch('/pages/work/ordinaryUsers/index')
			case 1:
				this.$tab.reLaunch('/pages/work/business/index')	
			case 2:
				this.$tab.reLaunch('/pages/work/manage/index')	
		}
		
        this.$modal.showToast('模块建设中~')
      }
    }
  }
</script>

<style>
	/* #ifndef APP-NVUE */
	page {
	  display: flex;
	  flex-direction: column;
	  box-sizing: border-box;
	  background-color: #fff;
	  min-height: 100%;
	  height: auto;
	}
	
	view {
	  font-size: 14px;
	  line-height: inherit;
	}
	
	/* #endif */
	
	.text {
	  text-align: center;
	  font-size: 26rpx;
	  margin-top: 10rpx;
	}
	
	.grid-item-box {
	  flex: 1;
	  /* #ifndef APP-NVUE */
	  display: flex;
	  /* #endif */
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 15px 0;
	}
	
	.uni-margin-wrap {
	  width: 690rpx;
	  width: 100%;
	  ;
	}
	
	.swiper {
	  height: 300rpx;
	}
	
	.swiper-box {
	  height: 150px;
	}
	
	.swiper-item {
	  /* #ifndef APP-NVUE */
	  display: flex;
	  /* #endif */
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  color: #fff;
	  height: 300rpx;
	  line-height: 300rpx;
	}
	
	@media screen and (min-width: 500px) {
	  .uni-swiper-dot-box {
	    width: 400px;
	    /* #ifndef APP-NVUE */
	    margin: 0 auto;
	    /* #endif */
	    margin-top: 8px;
	  }
	
	  .image {
	    width: 100%;
	  }
	}
</style>